<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>分页显示</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            margin: 0px auto 0px auto;
        }
        table th,td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>SALARY</th>
            <th>DELETE</th>
            <th>EDIT</th>
        </tr>
        <!-- pageInfo.list 表示从 PageInfo 对象中获取集合数据 -->
        <tbody th:if="${#lists.isEmpty(pageInfo.list)}">
            <tr>
                <td colspan="5">抱歉！没有查询到你需要的数据！</td>
            </tr>
        </tbody>
        <tbody th:if="${not #lists.isEmpty(pageInfo.list)}">
            <tr th:each="employee : ${pageInfo.list}">
                <td th:text="${employee.empId}"></td>
                <td th:text="${employee.empName}"></td>
                <td th:text="${employee.empSalary}"></td>
                <td>删除</td>
                <td>编辑</td>
            </tr>
        </tbody>
        <tr>
            <td colspan="5">添加新数据</td>
        </tr>
        <tr>
            <td colspan="5">

                <span th:each="targetNum : ${pageInfo.navigatepageNums}">

                    <!-- 不是当前页显示为超链接 -->
                    <a th:if="${targetNum != pageInfo.pageNum}"
                       th:href="@{/employee/page/}+${targetNum}"
                       th:text="'['+${targetNum}+']'">目标页面的页码</a>

                    <!-- 是当前页不需要显示为超链接 -->
                    <span th:if="${targetNum == pageInfo.pageNum}" th:text="'['+${targetNum}+']'">当前页页码</span>

                </span>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <span th:if="${pageInfo.hasPreviousPage}">
                    <a th:href="@{/employee/page/1}">首页</a>
                    <a th:href="@{/employee/page/}+${pageInfo.prePage}">上一页</a>
                </span>

                [[${pageInfo.pageNum}]]/[[${pageInfo.pages}]]
                [[${pageInfo.pageNum}+'/'+${pageInfo.pages}]]

                <span th:if="${pageInfo.hasNextPage}">
                    <a th:href="@{/employee/page/}+${pageInfo.nextPage}">下一页</a>
                    <a th:href="@{/employee/page/}+${pageInfo.pages}">末页</a>
                </span>
            </td>
        </tr>
        <tr>
            <td colspan="5">
                <!-- 绑定值改变事件响应函数 -->
                <input id="jumpToPageNumInput" type="text" name="jumpToPageNum" placeholder="请输入您想直接跳转的页码" />
            </td>
        </tr>
    </table>

</body>
<script type="text/javascript">

    // 获取页码文本框的元素对象
    var jumpPageNumEle = document.getElementById("jumpToPageNumInput");

    // 给页码文本框绑定值改变响应函数
    jumpPageNumEle.onchange = function () {

        // 触发值改变响应函数后，获取当前文本框中用户输入的值
        var targetNum = this.value;

        // 检测用户输入的数据是否是数字
        if (isNaN(targetNum)) {

            // 如果不是数字则恢复文本框
            this.value = "";

            // 当前函数结束
            return ;
        }

        // 如果用户输入合法，则跳转页面
        // [[@{/employee/page/}]] 表示解析 Thymeleaf 表达式
        window.location.href = "[[@{/employee/page/}]]" + targetNum;

    };

</script>
</html>